<template>
  <!-- 个人实名认证1 》 上传身份证 -->
  <view class="content-real">
    <view v-if="userStore.userInfo.user.is_certified == 1">
      <h-line height="120"></h-line>
      <view class="card">
        <view class="image">
          <up-avatar :src="userStore?.userInfo?.user?.avatar" size="120rpx"></up-avatar>
        </view>
        <view class="name">{{ phoneDesensitization(userStore?.userInfo?.user?.account) }}</view>
        <view class="status flex-center"
          >{{ userStore?.userInfo?.user?.is_certified == 1 ? '已通过' : '未认证' }}
        </view>
        <view class="line"></view>
        <view class="row">
          <view>姓名</view>
          <view>{{ nameDesensitization(userStore?.userInfo?.user?.real_name) }}</view>
        </view>
        <view class="row">
          <view>身份证号</view>
          <view>{{ idCardDesensitization(userStore?.userInfo?.user?.card_id) }}</view>
        </view>
      </view>
    </view>
    <view v-else>
      <view class="lv-pages-content-bodyer-card">
        <view class="item">
          <view class="lv-pages-content-bodyer-card-lt">真实姓名</view>
          <view class="lv-pages-content-bodyer-card-rt">
            <input
              v-model="form.name"
              class="text-input f-s-24"
              maxlength="40"
              placeholder-class="placeholder-class"
              type="text"
              placeholder="请输入"
            />
            <!-- <u-icon name="arrow-right" color=" #99999" size="14"></u-icon> -->
          </view>
        </view>
        <view class="item">
          <view class="lv-pages-content-bodyer-card-lt">身份证号</view>
          <view class="lv-pages-content-bodyer-card-rt">
            <input
              v-model="form.idcard"
              class="text-input f-s-24"
              maxlength="40"
              placeholder-class="placeholder-class"
              type="idcard"
              placeholder="请输入"
            />
            <!-- <u-icon name="arrow-right" color=" #99999" size="14"></u-icon> -->
          </view>
        </view>
      </view>

      <view class="upload_c mar-0-auto mar-t-30 w-702">
        <view class="item">
          <view class="upload">
            <view @click="openAuth(1)">
              <image
                class="upload_img"
                :src="form.idcard_just"
                radius="16"
                v-if="form.idcard_just"
              />
              <image
                class="upload_img"
                src="@/static/my/ic-card-front-icon.png"
                radius="16"
                v-else
              />
            </view>
          </view>
          <view class="co-black f-s-26">上传身份证人像面</view>
        </view>
        <view class="item">
          <view class="upload">
            <view @click="openAuth">
              <image
                class="upload_img"
                :src="form.idcard_back"
                radius="16"
                v-if="form.idcard_back"
              />
              <image
                class="upload_img"
                src="@/static/my/ic-card-back-icon.png"
                radius="16"
                v-else
              />
            </view>
          </view>
          <view class="co-black f-s-26">上传身份证国徽面</view>
        </view>
      </view>

      <view class="popup_check">
        <checkbox-group @change="isChecked = !isChecked">
          <label>
            <checkbox :checked="false" size="mini" color="#4a4a4a" style="transform: scale(0.8)" />
          </label>
        </checkbox-group>
        <view class="popup_check_text">
          <text>阅读并同意</text>
          <text
            class="popup_check_text_c"
            @click="
              navigateTo(
                `/pages-users/common-agreement/index?url=blapp/v1/about/face_authentication&title=人脸验证协议`,
              )
            "
            >《人脸验证协议》</text
          >
          <text
            class="popup_check_text_c"
            @click="
              navigateTo(
                `/pages-users/common-agreement/index?url=blapp/v1/about/real_name&title=实名认证服务协议`,
              )
            "
            >《实名认证服务协议》</text
          >
        </view>
      </view>

      <view class="nextBtn" @click="toPages">下一步</view>
    </view>

    <h-authpup ref="authpup" type="top" @changeAuth="changeAuth" permissionID="CAMERA"></h-authpup>
  </view>
</template>

<script setup>
import { ref, nextTick } from 'vue'
import { onLoad, onReachBottom, onReady } from '@dcloudio/uni-app'
import {
  showToast,
  navigateTo,
  navigateBack,
  formatDate,
  redirectTo,
  idCardDesensitization,
  nameDesensitization,
  phoneDesensitization,
} from '@/utils'
import { uploadApi } from '@/utils/upLoad.ts'
import { useMemberStore } from '@/stores'
const userStore = useMemberStore()
const isChecked = ref(false)

const authpup = ref(null)
const flag = ref(0)
function openAuth(num) {
  flag.value = num
  nextTick(() => {
    authpup.value.open()
  })
}

function changeAuth() {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    success: async (e) => {
      const res = await uploadApi(e.tempFilePaths[0])
      if (flag.value == 1) {
        form.value.idcard_just = res
      } else {
        form.value.idcard_back = res
      }
    },
  })
}

onLoad(() => {})

const form = ref({
  name: '',
  idcard: '',
  idcard_just: '',
  idcard_back: '',
})
// 校验用户是否打开摄像头权限，然后再跳转页面
function toPages() {
  if (!form.value.name) {
    showToast('请输入真实姓名')
    return
  }
  if (!form.value.idcard || form.value.idcard.length !== 18) {
    showToast('请输入正确的身份证号')
    return
  }
  if (!form.value.idcard_just) {
    showToast('请上传身份证人像面')
    return
  }
  if (!form.value.idcard_back) {
    showToast('请上传身份证国徽面')
    return
  }
  if (!isChecked.value) {
    showToast('请阅读并勾选底部协议')
    return
  }
  navigateTo(`/pages-users/tool-real/real-2?info=${JSON.stringify(form.value)}`)

  // 校验摄像头权限是否开启
  // uni.getAppAuthorizeSetting({
  //     success: (res) => {
  //         console.log(res);
  //         if (!res.authSetting['scope.camera']) {
  //             uni.authorize({
  //                 scope: 'scope.camera',
  //                 success: () => {
  //                     navigateTo('/pages-user/my-live/create-live-real-2')
  //                 },
  //                 fail: () => {
  //                     showToast('请打开摄像头权限')
  //                 }
  //             })
  //         } else {
  //             navigateTo('/pages-user/my-live/create-live-real-2')
  //         }
  //     }
  // })
}
</script>

<style scoped lang="scss">
.content-real {
  width: 100%;
  min-height: 100vh;
  background: #f6f6f6;
  border-top: 1rpx solid #fff;
  box-sizing: border-box;
  padding-bottom: 200rpx;

  .card {
    margin: 0 auto;
    width: 638rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(214, 214, 214, 0.5);
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    opacity: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 30rpx;

    .image {
      position: absolute;
      top: -60rpx;
      left: 50%;
      transform: translateX(-50%);
      background-color: #eee;
      border-radius: 50%;
    }

    .name {
      margin-top: 120rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #040404;
    }

    .status {
      width: 127rpx;
      height: 48rpx;
      background: #ffffff;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      opacity: 1;
      border: 1rpx solid #e6e6e6;
      font-size: 26rpx;
      font-weight: 400;
      color: #63cc5e;
      margin-top: 20rpx;
    }

    .line {
      width: 590rpx;
      height: 2rpx;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
      opacity: 1;
      background-color: #d9d9d9;
      margin-top: 50rpx;
    }

    .row {
      width: 590rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 28rpx;
      font-size: 26rpx;
      font-weight: 400;
      color: #000000;
    }
  }

  .nextBtn {
    margin: 0 auto;
    width: 630rpx;
    height: 90rpx;
    background: #0074fc;
    border-radius: 46rpx;
    font-size: 34rpx;
    font-family: PingFang-SC-Bold, PingFang-SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 90rpx;
    text-align: center;
    margin: 50rpx auto;
  }

  .lv-pages-content-bodyer-card {
    width: 702rpx;
    background: #ffffff;
    box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(181, 181, 181, 0.16);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    display: flex;
    flex-direction: column;
    padding: 0 24rpx;
    margin: 0 auto;
    margin-top: 20rpx;

    .item {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .lv-pages-content-bodyer-card-lt {
      font-size: 28rpx;
      font-weight: 400;
      color: #333333;
    }

    .lv-pages-content-bodyer-card-rt {
      display: flex;

      .lv-pages-content-bodyer-card-picker-pl {
        color: #868686;
        font-size: 24rpx;
      }

      ::v-deep .placeholder-class {
        font-size: 24rpx;
      }

      .text-input {
        text-align: right;
      }

      ::v-deep .u-icon {
        margin-left: 16rpx;

        .u-icon__icon {
          font-weight: 600 !important;
        }
      }
    }
  }
}

.upload_c {
  height: 260rpx;
  display: flex;
  justify-content: space-between;

  .item {
    width: 336rpx;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    .upload {
      width: 336rpx;
      height: 195rpx;

      .upload_img {
        width: 336rpx;
        height: 195rpx;
        border-radius: 16rpx;
      }
    }
  }
}

.popup_check {
  width: 100%;
  bottom: 60rpx;
  display: flex;
  align-items: center;
  margin-top: 100rpx;
  line-height: 1;
  display: flex;
  justify-content: center;

  .popup_check_text {
    display: flex;
    font-size: 20rpx;

    .popup_check_text_c {
      color: #0074fc;
    }
  }
}

.nextBtn {
  width: 630rpx;
  height: 90rpx;
  background: #0074fc;
  border-radius: 46rpx;
  font-size: 34rpx;
  font-family: PingFang-SC-Bold, PingFang-SC;
  font-weight: bold;
  color: #ffffff;
  line-height: 90rpx;
  text-align: center;
  margin: 50rpx auto;
}
</style>
